<template>
    <div class="home-page-header">
            <div class="yousport-background-wrapper" :class="{'yousport-frontcover-default':!backgroundImg.backgroundImage}" :style="backgroundImg" @click="changeBackgroundImg">
                <div v-if="!backgroundImg.backgroundImage && isMyHomePage" class="yousport-label">
                    <i class="iconfont icon-photo"></i>
                    <br>
                    轻触设置背景
                </div>

            </div>
            <div class="yousport-avatar-wrapper">
                <Avatar :avatar="avatar" :name="name" className="yousport-avatar"></Avatar>
                <div class="show-name">
                    {{name}}
                </div>
                <div class="show-dept">
                    {{dept}}
                </div>
            </div>
            <mt-actionsheet v-if='isMyHomePage'
                    :actions="actions"
                    v-model="sheetVisible">
            </mt-actionsheet>
    </div>
</template>

<script>

    import config from '../assets/config.js'
    import { Toast } from 'mint-ui';
    import Avatar from './ys-avatar.vue'
    import util from '../assets/util'

    export default {
        components:{
            Avatar
        },
        data() {
            return {
                sheetVisible:false,
                changeBackgroundUrl: config.host + config.changeMyHomePageBackgroundUrl
            };
        },

        props:{
            backgroundImg:Object,
            avatar:String,
            isMyHomePage:false,
            name:String,
            dept:String
        },
        methods: {
            changeMyHomePageBackgroundImg(frontCover) {
                let me = this;
                this.$http.post(this.changeBackgroundUrl,
                    {frontCover: frontCover}
                ).then((res)=>{
                    if (res.data.code == 0) {

                    me.backgroundImg = {
                            backgroundImage:'url('+ frontCover +')'
                        };
                        util.session.set('my-front-update', frontCover);
                    } else {
                        Toast('修改失败');
                    }
                }).catch((res) => {

                    Toast('修改失败');
                });
            },
            changeBackgroundImg() {
                this.sheetVisible = true;
            },
            uploadImg(){
                let me = this;
                yyesn.client.selectAttachment((d)=>{
                    if (d.data[0].path) {
                        me.changeMyHomePageBackgroundImg(d.data[0].path);
                    }
                },{
                    type:'1',
                    maxselectnum:'1'
                })
            },
            camera(){
                let me = this;
                yyesn.client.selectAttachment(function (d) {
                    if (d.data[0].path) {
                        me.changeMyHomePageBackgroundImg(d.data[0].path);
                    }
                },{
                    type:'4',
                    maxselectnum:'1'
                })
            }
        },
        created(){
            this.actions = [{
                name:'拍照',
                method:this.camera
            },{
                name:'相册',
                method:this.uploadImg
            }]
        },
        mounted() {

        }
    };
</script>
<style>
    .yousport-background-wrapper {
        position: relative;
        background-size: cover;
        background-position: center;
        height: 200px;
        background-color: #4E4E4E;
    }
    .home-page-header {
        text-align: center;
    }
    .yousport-background-img {
        width: 100%;
        height: 200px;
        background-color: #4E4E4E;
        text-align: center;
    }
    .yousport-label {
        color: #FEFEFE;
        font-size: 14px;
        line-height: 20px;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        margin-top: -10px;
        text-align: center;
    }
    .yousport-avatar-wrapper {
        position: relative;
        margin-top: -30px;
    }
    .yousport-avatar .per-icon, .yousport-avatar .avatar-bg {
        width: 60px;
        height: 60px;
        border: 2px solid #fff;
        border-radius: 50%;
        line-height: 60px;
        margin:0;
    }
    .show-name {
        font-size:16px;
        color:#262626;
    }
    .show-dept {
        font-size: 14px;
        color:#9e9e9e;
    }

</style>
